<template>
    <div>
        <a-modal
            title="合并办理"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="visible = false"
            @cancel="visible = false"
            :width="900"
        >
            <div v-if="isOk" class="technicalReview-multipleTaskPrompts-box">
                <table border bordercolor="#d9d9d9" style="width: 100%; margin-top: 15px;">
                    <tr>
                        <td class="title-left-v">
                            请选择待合并事项
                            <br/>
                            <span style="color: #ed5565;">（注意勾选顺序）</span>
                        </td>
                        <td colspan="3">
                            <a-checkbox-group @change="onChange" :key="currentListKey">
                                <div v-for="(item,index) in currentList" :key="index">
                                    <a-checkbox  :value="item.id" >{{ item.fywflname }}--{{ item.fsxmc }}</a-checkbox>
                                </div>
                            </a-checkbox-group>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <div class="tips-box">
                                <span>*</span>
                                已选事项
                            </div>
                        </td>
                        <td colspan="3">
                            <div v-for="(item,index) in selectList" :key="index" style="display: flex;align-items: center;" >
                                <span>{{ index+1 }}、{{ item.fywflname }}--{{ item.fsxmc }}</span>
                                <a-icon style="color: #ed5565;font-size: 18px;padding-left: 5px;" type="minus-circle" @click="removeChange(item)"/>
                                <!-- <a-button size="small" style="margin-left: 5px;margin-bottom: 5px;" class="red-btn" type="primary" @click="removeChange(item)" >移除</a-button> -->
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <div class="tips-box">
                                <span>*</span>
                                合并事项名称
                            </div>
                        </td>
                        <td colspan="3">
                            <a-textarea 
                                v-model:value="currentData.hbsxmc"
                                placeholder="请输入合并事项名称"
                                :autosize="{ minRows: 2, maxRows: 8 }"
                            ></a-textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <div class="tips-box">
                                <span>*</span>
                                主办人
                            </div>
                        </td>
                        <td colspan="3" :key="zbridKey">
                            <a-radio-group @change="onZbrChange">
                                <a-radio v-for="(item,index) in recordsZbrList" :value="item.id">
                                    {{ item.realname }}
                                </a-radio>
                            </a-radio-group>
                            <!-- <div :key="blrKey">
                                <span style="display: inline-block;margin-right: 10px;" v-if="currentData.zbrName">{{ currentData.zbrName }}</span>
                                <a-button class="blue-btn" type="primary" @click="selectRYClick(currentData.zbrid?currentData.zbrid:'','zbr')" >选择</a-button>
                            </div> -->
                        </td>
                        <!-- <td class="title-left-v">协办人</td> -->
                        <!-- <td>
                            <div :key="blrKey">
                                <span style="display: inline-block;margin-right: 10px;" v-if="currentData.xbrName">{{ currentData.xbrName }}</span>
                                <a-button class="blue-btn" type="primary" @click="selectRYClick(currentData.xbrid?currentData.xbrid:'','xbr')" >选择</a-button>
                            </div>
                        </td> -->
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <div class="tips-box">
                                <span>*</span>
                                办理意见
                            </div>
                        </td>
                        <td colspan="3">
                            <a-textarea 
                                v-model:value="currentData.opinion"
                                placeholder="请输入审评情况专述"
                                :autosize="{ minRows: 2, maxRows: 5 }"
                            ></a-textarea>
                        </td>
                    </tr>
                </table>
                <!-- <div v-for="(item,index) in currentList" :key="index">
                    <div style="border: 1px solid #38f;padding: 5px 10px;color: #38f;border-radius: 18px;">{{ item.fywflname }}--{{ item.fsxmc }}</div>
                </div> -->
            </div>
            <div v-else style="display: flex;justify-content: center;">
                <a-empty />
            </div>
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;"  :key="currentKey">
                    <a-button @click="visible = false" >关闭</a-button>
                    <a-button v-if="isOk" style="margin-left: 10px;" class="blue-btn" type="primary" @click="handleOk" >确定</a-button>
                </div>
            </template>
            <personnelList
             ref="personnelListRef" 
             @checkPersonnel="checkPersonnel" 
             :modaObj="modaObj" 
             :radioCheck="true"
             />
        </a-modal>
    </div>
</template>
<script>
import personnelList from '../../../../administrativeOffice-new/modal/personnelList.vue'
import { hbjchbsqsx,hbjcgetdqsxjbrList } from './service/index'
export default {
    components:{
        personnelList,
    },
    data() {
        return {
            visible: false,
            confirmLoading: false,
            currentList:[],
            selectList:[],
            currentData:{},
            modaObj:{
                place:'',
                oldId:'',
            },
            blrKey:null,
            currentKey:null,
            isOk:false,
            selecId:[],
            currentListKey:null,
            zbridKey:null,
            recordsZbrList:[],
        };
    },
    methods: {
        getData(list,val){
            this.isOk = list.length?true:false
            this.selectList = []
            this.currentList = []
            this.currentList = list
            this.currentData = {sqsxid:val.sqsxid,jobid:val.jobid}
            this.currentKey = Date.now()
        },
        getZbrData(){
            this.currentData.zbrid = ''
            this.zbridKey = Date.now()
            hbjcgetdqsxjbrList({ids:this.selecId.join(',')}).then(res=>{
                if(res.code == 200){
                    this.recordsZbrList = res.result.records
                    //console.log(res.records)
                }
            })
        },
        checkPersonnel(val,val2,val3){
            //console.log(val,val2,val3)
            if(val == 'zbr'){
                this.currentData.zbrid = val2[0]
                this.currentData.zbrName = val3[0]
            }else{
                this.currentData.xbrid = val2[0]
                this.currentData.xbrName = val3[0]
            }
            this.blrKey = Date.now()
        },
        selectRYClick(val,key){
            this.modaObj = {
                place:key,
                oldId:[val]
            }
            this.$refs.personnelListRef.personnelListVisible = true
            this.$refs.personnelListRef.getData(this.modaObj)
        },
        onChange(val){
            //console.log(val)
            let nameList = []
            if(val.length) {
                // this.currentData.ids = val.join(',')
                this.currentList.forEach((item,index) => {
                    if(val[0] == item.id){
                        this.currentList.splice(index,1)
                        this.selectList.push({...item,index:index})
                        this.selecId.push(item.id)
                        this.currentData.ids = this.selecId.join(',')
                        this.currentListKey = Date.now()
                        this.getZbrData()
                    }
                });
                nameList = this.selectList.map((a,i)=>{return a.fywflname+'--'+ a.fsxmc})
                this.currentData.hbsxmc = nameList.join('、')
            }else{
                // this.currentData.ids = ''
            }
        },
        removeChange(row){
            let nameList = []
            this.selectList.forEach((item,index)=>{
                if(row.id == item.id){
                    this.currentList.push(item)
                    this.selectList.splice(index,1)
                    this.selecId.splice(index,1)
                    this.currentData.ids = this.selecId.join(',')
                    this.currentListKey = Date.now()
                    this.getZbrData()
                }
            })
            nameList = this.selectList.map((a,i)=>{return a.fywflname+'--'+ a.fsxmc})
            this.currentData.hbsxmc = nameList.join('、')
        },
        onZbrChange(val){
            //console.log(val)
            this.currentData.zbrid = val.target.value
        },
        // 
        handleOk(){
            if(!this.currentData.ids) {this.$message.warning('请先选择合并事项'); return false} 
            if(!this.currentData.hbsxmc) {this.$message.warning('请输入合并事项名称'); return false} 
            if(!this.currentData.zbrid) {this.$message.warning('请先选择主办人'); return false}
            // if(!this.currentData.xbrid) {this.$message.warning('请先选择协办人'); return false}
            if(!this.currentData.opinion) {this.$message.warning('请输入办理意见'); return false} 
            hbjchbsqsx(this.currentData).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.visible = false
                    this.$emit('successReturn',false)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
    },
};
</script>
<style lang="less">
.technicalReview-multipleTaskPrompts-box{
    td{
        padding: 5px;
        height: 30px;
    }
    .title-left-v{
        text-align: center;
        width: 140px;
        font-weight: 600;
        font-size: 16px;
        background-color:#e6f7ff;
        font-family: simHei;
        color: rgba(0, 0, 0, 0.85);
        .tips-box{
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                color: #ed5565;
                font-size: 20px !important;
            }
        }
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper{
        margin: 0;
    }
}
</style>